<template>
  <div class="swiper">
   <div class="myswiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imglist" :key="item.id">
        <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imglist: [
        {
          id: 1,
          img: "https://storage.360buyimg.com/orange-component/147d47e3618044bbbb98b5924ec34e91.png"
        },
        {
          id: 2,
          img: "https://storage.360buyimg.com/orange-component/7f925dd280264daa8a2c007c1c5287ce.png"
        },
        {
          id: 3,
          img: "https://storage.360buyimg.com/orange-component/972b27dcad914ec8b24474d317ec6ef5.png"
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.swiper {
  width: 100%;
  height: 100%;
.myswiper{
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 100%;

  .my-swipe .van-swipe-item {
    height:150px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
    overflow: hidden;
    img{
      height: 100%;
      width:100%
    }
  }
}
  
}
</style>